<template>
    <div class="t1">
        <div class="t2">{{ $t('text.House.l37') }}</div>
        <div class="t3">{{ $t('text.House.l38') }}</div>
        <div class="t4">
            <div v-for="(item, index) in titleList" v-bind:key="item" class="t5"
                :style="index == 1 || index == 5 ? { flex: 0.7 } : ''">{{ item }}</div>
        </div>
        <div v-infinite-scroll="load" class="infinite-list" style="overflow: auto;height: 100%;padding: 0;margin: 0;">
            <div class="t6" v-for="item in dataList" v-bind:key="item">
                <TakeLookList :dataList="item" isCustomer></TakeLookList>
            </div>
            <el-divider v-if="loading">
                {{ $t('text.House.l207') }}
            </el-divider>
            <el-divider v-if="disabled">
                {{ $t('text.House.l48') }}
            </el-divider>
        </div>
    </div>
</template>
    
<script>
import TakeLookList from '@/components/houseList/TakeLookList.vue'
import { leadByCustomerId } from '../../http/api'
import pinia from '../../store'
import { useHouse } from '../../store/houseShareData'

export default {
    name: 'TakeLookDetail',
    components: {
        TakeLookList
    },
    data() {
        return {
            titleList: [this.$t('text.House.l39'), this.$t('text.House.l40'), this.$t('text.Customer.l11'),
            this.$t('text.House.l42'), this.$t('text.House.l43'), this.$t('text.House.l44'), this.$t('text.House.l45')],
            dataList: [],
            page: 1,
            loading: false,
            disabled: false
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        load() {
            if (!this.loading&&!this.disabled)
                if (this.dataList.length % 20 == 0 && this.dataList.length != 0) {
                    this.page = this.page + 1
                    this.loading = true
                    this.getData()
                } else {
                    this.disabled = true
                }
        },
        getData() {
            leadByCustomerId({ customerId: this.$route.query.id, page: this.page, size: 20 }).then(res => {
                if (res !== undefined) {
                    if (res.dataList.length == 0) {
                        this.loading = false
                        this.disabled = true
                    } else {
                        this.dataList = [...this.dataList, ...res.dataList]
                        this.loading = false
                    }

                    console.log(res)
                }
            }).catch()
        }
    },
    watch: {
        houseTakeLook() {
            this.dataList = []
            this.page = 1
            this.getData()
        }
    },
    computed: {
        houseTakeLook() {
            return useHouse(pinia).houseTakeLook
        }
    },
}
</script>
    
<style scoped>
.t1 {
    display: flex;
    flex-direction: column;
    padding-top: 30px;
}

.t2 {
    font-size: 14px;
    color: black;
    text-align: left;
    padding-left: 35px;
    padding-right: 35px;
    padding-bottom: 5px;
}

.t3 {
    font-size: 13px;
    color: gray;
    text-align: left;
    padding-left: 35px;
}

.t4 {
    border-bottom: 1px solid #ddd;
    margin-left: 35px;
    margin-right: 35px;
    display: flex;
    align-items: center;
    text-align: left;
}

.t5 {
    flex: 1;
    font-size: 13px;
    color: gray;
    padding-top: 20px;
    padding-bottom: 20px;
}

.t6 {
    border-bottom: 1px solid #ddd;
    margin-left: 35px;
    margin-right: 35px;
    display: flex;
    align-items: center;
    text-align: left;
    padding-top: 5px;
    padding-bottom: 15px;
    gap: 20px;
}
</style>